<template>
  <v-contextmenu ref="contextmenu">
    <v-contextmenu-item @click="">菜单1</v-contextmenu-item>
    <v-contextmenu-item>菜单2</v-contextmenu-item>
    <v-contextmenu-item>菜单3</v-contextmenu-item>
  </v-contextmenu>

  <div v-contextmenu:contextmenu class="menu-box">右键菜单选项</div>
</template>

<script>
import {directive, Contextmenu, ContextmenuItem} from "v-contextmenu";
import "v-contextmenu/dist/themes/default.css";

export default {
  directives: {
    contextmenu: directive,
  },

  components: {
    [Contextmenu.name]: Contextmenu,
    [ContextmenuItem.name]: ContextmenuItem,
  }
}
</script>
<style lang="scss" scoped>
.menu-box {
  height: 200px;
  width: 400px;
  border: 1px solid pink
}
</style>